// 入口函数
$(function () {
  // 1. 定义一个全局变量,将来用于操作get参数
  let q = {
    pagenum: 1, // 是	int	        页码值
    pagesize: 2, // 是	int	        每页显示多少条数据
    cate_id: '', // 否	string	    文章分类的 Id
    state: '' // 否	    string	    文章的状态，可选值有：已发布、草稿
  }

  // 2. 初始化文章列表渲染表格页面 - 封装成函数,将来复用
  initArticleList() // 调用初始化文章列表函数 渲染页面

  function initArticleList () {
    // 2.1 发起ajax
    axios({
      method: 'get',
      url: '/my/article/list',
      // get类型要用 params 属性.
      params: q
    }).then(res => {
      //成功回调
      //   console.log(res.data)

      if (res.data.status != 0) {
        return layui.layer.msg(res.data.message)
      }

      // 2.2 申明数组,遍历添加
      let arr = []
      res.data.data.forEach(ele => {
        arr.push(`
            <tr>
                <td>
                    <a data-id="${
                      ele.Id
                    } href="javascript:" class="link-detail">${ele.title}</a>
                </td>
                <td>${ele.cate_name}</td>
                <td>${formatDate(ele.pub_date)}</td>
                <td>${ele.state}</td>
                <td>
                <a href="/article/art-edit.html?id=${
                  ele.Id
                }" class="layui-btn layui-btn-xs">修改</a>
                    <button data-id="${
                      ele.Id
                    }" class="del-btn layui-btn layui-btn-xs layui-btn-danger">删除</button>
                </td>
            </tr>
        `)
      })

      // 2.3 遍历完成后,渲染至页面
      $('tbody')
        .empty()
        .html(arr.join(''))

      // 2.4 调用分页功能函数
      renderPage(res.data.total)
    })
  }

  // 3. 初始化文章分类 - 封装成函数 - 可以复制 发表文章 页面得js
  //   3.1 调用函数 - 渲染表单
  initArtCateList() //函数不调用不执行

  function initArtCateList () {
    // 1.1.2 发起ajax
    axios({
      method: 'get',
      url: '/my/article/cates'
    }).then(res => {
      //成功回调
      //   console.log(res)

      if (res.data.status != 0) {
        return layui.layer.msg(res.data.message)
      }

      // 1.1.3 成功后遍历数组，动态新增
      let arr = ['<option value="">请选择文章类别</option>']
      res.data.data.forEach(ele => {
        if (ele.Id > 0) {
          arr.push(`<option value="${ele.Id}">${ele.name}</option>`)
        }
      })

      //   1.1.4 循环结束 - 渲染至表单的下拉框
      //   let str = arr.join('')
      $('[name="cate_id"]')
        .empty()
        .html(arr.join(''))

      // 1.1.5 更新渲染 - 因为有些元素是动态新增，这是form模块自动化渲染失效，需使用form.render(type, filter);方法
      // 内置模块 - 表单 - 更新渲染
      layui.form.render()
    })
  }

  // 4. 筛选功能
  $('#searchForm').on('submit', function (e) {
    // 4.1 阻止表单默认行为
    e.preventDefault()

    // 4.2 cate_id 和 state 得的值修改,根据form表单里面的值修改
    q.cate_id = $('[name="cate_id"]').val()
    q.state = $('[name="state"]').val()

    // 4.3 重新渲染 文章列表 - 表格
    initArticleList()
  })

  // 5. 分页 - 封装函数,: 内置模块 - 分页 - 快速使用
  function renderPage (total) {
    //   5.1 分页渲染
    layui.laypage.render({
      elem: 'pageBox', //注意，这里的 test1 是 ID，不用加 # 号
      count: total, //数据总数，从服务端得到
      limit: q.pagesize, // 每页显示多少条
      curr: q.pagenum, // 第几页

      // 显示区域
      layout: ['count', 'limit', 'prev', 'page', 'next', 'refresh', 'skip'],
      limits: [2, 5, 10, 20],
      jump: function (obj, first) {
        //obj包含了当前分页的所有参数，比如：
        // console.log(obj.curr) //得到当前页，以便向服务端请求对应页的数据。
        // console.log(obj.limit) //得到每页显示的条数

        //首次不执行
        if (!first) {
          //do something
          // 5.1.1 把当前页改变 + 把条数改变 + 重新渲染文章列表
          q.pagenum = obj.curr
          q.pagesize = obj.limit // 不修改的话,显示最多条数下拉框无法正常使用
          initArticleList()
        }
      }
    })
  }

  // 6. 删除 - 事件委托
  $('tbody').on('click', '.del-btn', function () {
    // 6.1 获取自定义属性
    let id = $(this).attr('data-id')

    // 6.2 弹出层
    layui.layer.confirm('确认要删除吗?', { icon: 3, title: '提示' }, function (
      index
    ) {
      //do something
      // 6.2.1 发起ajax
      axios({
        method: 'get',
        url: '/my/article/delete/' + id
      }).then(res => {
        //成功回调
        // console.log(res)

        if (res.data.status != 0) {
          return layui.layer.msg(res.data.message)
        }

        // 6.2.2 成功提示 +
        layui.layer.msg('恭喜您,删除文章成功!')

        // 6.2.3 (删除ajax成功后)当我们再次发起请求的时候,如果页面还有一条数据,当前页--,当前页大于1才有资格
        // if ($('.del-btn').length == 1 && q.pagenum > 1) {
        //   q.pagenum--
        // }
        // 优化 - 短路运算,前面的代码满足条件,后面才会执行
        $('.del-btn').length == 1 && q.pagenum > 1 && q.pagenum--

        // 6.2.4 重新渲染至页面
        initArticleList()
      })

      layer.close(index)
    })
  })

  // 7.点击文章标题,显示内容
  $('tbody').on('click', '.link-detail', function () {
    // 7.1 获取自定义属性id
    let id = $(this).attr('data-id')

    // 7.2 发起ajax
    axios({
      method: 'get',
      url: '/my/article/' + id
    }).then(res => {
      //成功回调
      // console.log(res)

      if (res.data.status != 0) {
        return layer.msg(res.data.message)
      }

      // 7.2 图片路径
      let baseURL = 'http://api-breakingnews-web.itheima.net'
      let url = baseURL + res.data.data.cover_img

      // 7.3 显示弹出层
      layui.layer.open({
        type: 1,
        title: '预览文章',
        area: ['980px', '470px'],
        content: `
              <div class="artinfo-box">
                  <h1 class="artinfo-title">${res.data.data.title}</h1>
                  <div class="artinfo-bar">
                      <span>作者：${res.data.data.cate_id}</span>
                      <span>发布时间：${res.data.data.pub_date}</span>
                      <span>所属分类：${res.data.data.cate_id}</span>
                      <span>状态：${res.data.data.state}</span>
                  </div>
                  <hr>
                  <img src="${url}" alt="" class="artinfo-cover">
                  <div>
                      <p>${res.data.data.content}</p>
                  </div>
              </div>`
      })
    })
  })
})
